<template>
  <div class="dashboard-container">
    <!-- <component :is="currentRole" /> -->
    <!-- <el-col :span="4" style="height: 100%;">
                <el-card>
                    <el-tree :data="dataList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </el-card>
            </el-col> -->
    <el-row type="flex" justify="end">
      <div style="margin: 10px">
        <el-button type="primary" @click="editOpen(0)">添加</el-button>
      </div>
    </el-row>
    <el-row>
      <el-col>
        <div class="app-container">
          <el-table
            :data="tableData"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column prop="store_name" label="商家名">
            </el-table-column>
            <el-table-column prop="coupon_number" label="优惠金额">
            </el-table-column>
            <el-table-column prop="coupon_condition" label="优惠条件">
            </el-table-column>
            <el-table-column align="center" label="状态">
              <template slot-scope="{ row }">
                <span>{{ row.status }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="{ row }">
                <div style="display: flex; justify-content: space-between">
                  <el-button @click="editOpen(1, row)" type="text" size="small"
                    >修改</el-button
                  >
                  <el-popconfirm
                    :title="'确定删除' + row.store_name + '吗'"
                    @confirm="del(row)"
                  >
                    <el-button
                      style="margin-left: 5px"
                      slot="reference"
                      type="text"
                      size="small"
                      >删除</el-button
                    >
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <Pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                        @pagination="getList" /> -->
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="editOpenType == 0 ? '新建' : '修改'"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <div>
        <el-form :inline="true" :model="formEdit" class="demo-form-inline">
          <el-form-item label="商家名">
            <el-input
              v-model="formEdit.store_name"
              placeholder="商家名"
            ></el-input>
          </el-form-item>
          <el-form-item label="优惠金额">
            <el-input
              v-model="formEdit.coupon_number"
              placeholder="优惠金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="优惠条件">
            <el-input
              v-model="formEdit.coupon_condition"
              placeholder="优惠条件"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="formEdit.status" placeholder="状态"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import adminDashboard from "./admin";
import editorDashboard from "./editor";
import { timestampToTime } from "@/utils";
export default {
  name: "Dashboard",
  components: { adminDashboard, editorDashboard },
  data() {
    return {
      statisticsObj: {},
      list: null,
      listLoading: false,
      currentRole: "adminDashboard",
      page: 1,
      listQuery: {
        page: 1,
        limit: 10,
      },
      total: 100,
      list: [],
      dataList: [
        {
          label: "一级 1",
          // children: [{
          //     label: '二级 1-1',
          //     children: [{
          //         label: '三级 1-1-1',

          //     }]
          // }]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [],
      search_form: {},
      dialogVisible: false,
      formEdit: { store_name: "" },
      editOpenType: null, // 编辑保存类型
    };
  },
  computed: {
    store_id() {
      return this.$store.state.user.regionalData.store_id;
    },
  },
  methods: {
    editOpen(type, row) {
      if (row) {
        this.formEdit = JSON.parse(JSON.stringify(row));
      }
      this.editOpenType = type;
      this.dialogVisible = true;
    },
    edit() {
      //新建编辑
      let url, message;
      if (this.editOpenType == 0) {
        url = "/add_coupon_api";
        message = "添加成功";
      } else {
        delete this.formEdit.store_name;
        delete this.formEdit.time;
        url = "/modify_coupon_api";
        message = "修改成功";
      }
      this.https(url, { ...this.formEdit, store_id: this.store_id }).then(
        (res) => {
          this.$message.success(message);
          this.dialogVisible = false;
          this.getList();
        }
      );
    },
    del(row) {
      this.https("/delete_coupon_api", {
        store_id: row.store_id,
        coupon_id: row.coupon_id,
      }).then((res) => {
        this.$message({
          type: "success", // success error warning
          message: `店家${row.store_name}删除成功`,
          duration: 2000,
        });
        this.getList();
      });
    },
    queryStatistics() {
      statistics(this.regionalData).then((res) => {
        this.statisticsObj = this.bus.$emit("statisticsObj", res[0].result);
      });
    },
    getList() {
      console.log(this);
      this.https("/read_coupon_api", { store_id: this.store_id }).then(
        (res) => {
          console.log(res);
          // res.result.forEach(item => {
          //     item.start_time = timestampToTime(item.start_time)
          // });
          this.tableData = res;
          // console.log(this.tableData, 'this.dataList')
        }
      );
    },
    search_Bth() {
      console.log(this.search_form, "search_form");
    },
    handleNodeClick(data) {
      console.log(data);
    },
  },
  created() {
    // sudo_login_api({uname:'gengzeyang',password:'123456'})
    this.getList();
    // this.queryStatistics()
  },
};
</script>
<style scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
}

.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
